<template>
	<view class='cpList'>
		<view class="kindBox">
			<view class="banner">
				<u-swiper :list="banner" border-radius='17' :effect3d="false" name='img' :circular="true" :autoplay='true' mode="rect" :height='height' bg-color='#ffffff'></u-swiper>
			</view>
			<view class="menus">
				<view :class="['menuOne',menu1 == '-1'?'active':'']" @tap='changeFirstMenu("-1")'>全部({{countData.quanbu?countData.quanbu:'0'}})</view>
				<view :class="['menuOne',menu1 == '0'?'active':'']" @tap='changeFirstMenu("0")'>无门槛券({{countData.wumenkan?countData.wumenkan:'0'}})</view>
				<view :class="['menuOne',menu1 == '1'?'active':'']" @tap='changeFirstMenu("1")'>满减券({{countData.manjian?countData.manjian:'0'}})</view>
				<view :class="['menuOne',menu1 == '2'?'active':'']" @tap='changeFirstMenu("2")'>活动券({{countData.huodong?countData.huodong:'0'}})</view>
				<view :class="['menuOne',menu1 == '3'?'active':'']" @tap='changeFirstMenu("3")'>折扣券({{countData.zhekou?countData.zhekou:'0'}})</view>
				<!-- <view :class="['menuOne',menu1 == '4'?'active':'']" @tap='changeFirstMenu("4")'>立减券({{countData.lijian?countData.lijian:'0'}})</view> -->
			</view>
			<view class="secondMenu dFlex jAround_aCenter">
				<view :class="['menuOne',menu2 == '1'?'active':'']" @tap='changeSecondMenu("1")'>未使用</view>
				<view :class="['menuOne',menu2 == '2'?'active':'']" @tap='changeSecondMenu("2")'>已使用</view>
				<view :class="['menuOne',menu2 == '3'?'active':'']" @tap='changeSecondMenu("3")'>已过期</view>
			</view>
		</view>
		<view class="coupon" v-if="haveList.length">
			<!-- 未使用 -->
			<view v-if="menu2 == '1'">
				<view class="cpOne" v-for="(item,index) in haveList" :key='index'>
					<view class="cpMain">
						<view class="cpBgImg imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/noUse.png" mode="widthFix"></image>
						</view>
						<view class="cpContent dFlex jBetween_aCenter">
							<view class="contentLeft">
								<view class="tag" v-if="item.type == '0'">无门槛券</view>
								<view class="tag" v-if="item.type == '1'">满减券</view>
								<view class="tag" v-if="item.type == '2'">活动券</view>
								<view class="tag" v-if="item.type == '3'">立减券</view>
								<view class="tag" v-if="item.type == '4'">折扣券</view>
								<view class="content dFlex jStart_aStart">
									<view class="shopImg imgPublic" v-if="cover_img">
										<image :src="item.cover_img" mode="widthFix"></image>
									</view>
									<view class="cpDetail">
										<view class="toast" v-if="item.appoint_type == '2'">仅指定商品使用</view>
										<view class="cpName">{{item.title}}</view>
										<view class="time">{{item.start_time_text.substring(0,item.start_time_text.length-3)}}至{{item.end_time_text.substring(0,item.end_time_text.length-3)}} </view>
										<view class="expbtn dFlex jStart_aCenter" @tap.stop='exchangeFlag(item)'>
											<text>详细信息</text>
											<view class="exBtn imgPublic">
												<image v-if="item.flag" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/open.png" mode="widthFix"></image>
												<image v-if="!item.flag" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/close.png" mode="widthFix"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="contentRight dFlex flexDirection jCenter_aCenter">
								<view class="cpCount" v-if="item.type == '4'"><text>{{item.discount}}</text>折</view>
								<view class="cpCount" v-if="item.type != '4'">￥<text>{{item.sub_price}}</text></view>
								<view class="condition" v-if="item.type != '4'">满{{item.min_price}}元可用</view>
								<view class="useBtn" @tap.stop='goHome'>立即使用</view>
							</view>
						</view>
					</view> 
					<view class="explain" v-if='item.flag'>
						<view class="line">{{item.rule}}</view>
					</view>
				</view>
			</view>
			<!-- 已使用 -->
			<view v-if="menu2 == '2'">
				<view class="cpOne status1" v-for="(item,index) in haveList" :key='index'>
					<view class="cpMain">
						<view class="cpBgImg imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/haveUse.png" mode="widthFix"></image>
							<view class="statusIcon imgPublic">
								<!-- 过期 -->
								<!-- <image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/gqIcon.png" mode="widthFix"></image> -->
								<!-- 使用 -->
								<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/useIcon.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="cpContent dFlex jBetween_aCenter">
							<view class="contentLeft">
								<view class="tag" v-if="item.type == '0'">无门槛券</view>
								<view class="tag" v-if="item.type == '1'">满减券</view>
								<view class="tag" v-if="item.type == '2'">活动券</view>
								<view class="tag" v-if="item.type == '3'">立减券</view>
								<view class="tag" v-if="item.type == '4'">折扣券</view>
								<view class="content dFlex jStart_aStart">
									<view class="shopImg imgPublic" v-if="cover_img">
										<image :src="item.cover_img" mode="widthFix"></image>
									</view>
									<view class="cpDetail">
										<view class="toast" v-if="item.appoint_type == '2'">仅指定商品使用</view>
										<view class="cpName">{{item.title}}</view>
										<view class="time">{{item.start_time_text.substring(0,item.start_time_text.length-3)}}至{{item.end_time_text.substring(0,item.end_time_text.length-3)}} </view>
										<view class="expbtn dFlex jStart_aCenter">
											<text>该券已用在订单：{{item.orderno}}</text>
										</view>
										<!-- <view class="expbtn dFlex jStart_aCenter">
											<text>删除该券</text>
											<view class="exBtn imgPublic">
												<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/delIcon.png" mode="widthFix"></image>
											</view>
										</view> -->
									</view>
								</view>
							</view>
							<view class="contentRight dFlex flexDirection jCenter_aCenter">
								<view class="cpCount" v-if="item.type == '4'"><text>{{item.discount}}</text>折</view>
								<view class="cpCount" v-if="item.type != '4'">￥<text>{{item.sub_price}}</text></view>
								<view class="condition" v-if="item.type != '4'">满{{item.min_price}}元可用</view>
							</view>
						</view>
					</view> 
				</view>
			</view>
			<!-- 已过期 -->
			<view v-if="menu2 == '3'">
				<view class="cpOne status1" v-for="(item,index) in haveList" :key='index'>
					<view class="cpMain">
						<view class="cpBgImg imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/haveUse.png" mode="widthFix"></image>
							<view class="statusIcon imgPublic">
								<!-- 过期 -->
								<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/gqIcon.png" mode="widthFix"></image>
								<!-- 使用 -->
								<!-- <image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/useIcon.png" mode="widthFix"></image> -->
							</view>
						</view>
						<view class="cpContent dFlex jBetween_aCenter">
							<view class="contentLeft">
								<view class="tag" v-if="item.type == '0'">无门槛券</view>
								<view class="tag" v-if="item.type == '1'">满减券</view>
								<view class="tag" v-if="item.type == '2'">活动券</view>
								<view class="tag" v-if="item.type == '3'">立减券</view>
								<view class="tag" v-if="item.type == '4'">折扣券</view>
								<view class="content dFlex jStart_aStart">
									<view class="shopImg imgPublic" v-if="cover_img">
										<image :src="item.cover_img" mode="widthFix"></image>
									</view>
									<view class="cpDetail">
										<view class="toast" v-if="item.appoint_type == '2'">仅指定商品使用</view>
										<view class="cpName">{{item.title}}</view>
										<view class="time">{{item.start_time_text.substring(0,item.start_time_text.length-3)}}至{{item.end_time_text.substring(0,item.end_time_text.length-3)}} </view>
										
									</view>
								</view>
							</view>
							<view class="contentRight dFlex flexDirection jCenter_aCenter">
								<view class="cpCount" v-if="item.type == '4'"><text>{{item.discount}}</text>折</view>
								<view class="cpCount" v-if="item.type != '4'">￥<text>{{item.sub_price}}</text></view>
								<view class="condition" v-if="item.type != '4'">满{{item.min_price}}元可用</view>
							</view>
						</view>
					</view> 
				</view>
			</view>
		</view>
		<view class="coupon empty imgPublic" v-else style="width: 42.5%!important;">
			<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/empty2.png" mode="widthFix"></image>
		</view>
		<view class="explain dFlex jCenter_aCenter" @tap='explain'>
			<text>优惠券说明</text>
			<view class="explainIcon imgPublic">
				<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/ask.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="recommend">
			<view class="titles dFlex jStart_aCenter">
				<view class="tit1 dFlex jStart_aCenter">
					<view class="titIcon imgPublic">
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/quanTitIcon.png" mode="widthFix"></image>
					</view>
					<text>推荐好券</text>
				</view>
				<view class="tit2">领券购物 价更低</view>
			</view>
			<view class="qlist">
				<view class="qOne" v-for="(item,index) in noHaveList" :key='index'>
					<view class="cpMain">
						<view class="cpBgImg imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/qBg_img.png" mode="widthFix"></image>
						</view>
						<view class="cpContent dFlex jBetween_aCenter">
							<view class="contentLeft">
								<view class="tag" v-if="item.type == '0'">无门槛券</view>
								<view class="tag" v-if="item.type == '1'">满减券</view>
								<view class="tag" v-if="item.type == '2'">活动券</view>
								<view class="tag" v-if="item.type == '3'">立减券</view>
								<view class="tag" v-if="item.type == '4'">折扣券</view>
								<view class="content dFlex jStart_aStart">
									<view class="shopImg imgPublic" v-if="cover_img">
										<image :src="item.cover_img" mode="widthFix"></image>
									</view>
									<view class="cpDetail">
										<view class="toast" v-if="item.appoint_type == '2'">仅指定商品使用</view>
										<view class="cpName">{{item.title}}</view>
										<view class="expbtn dFlex jStart_aCenter">
											<view class="progress">
												<view class="injoin" :style="'width:'+item.haveGet+'%'"></view>
											</view>
											<text>券已领取{{item.haveGet}}%</text>
										</view>
									</view>
								</view>
							</view>
							<view class="contentRight dFlex flexDirection jCenter_aCenter">
								<view class="cpCount" v-if="item.type == '4'"><text>{{item.discount}}</text>折</view>
								<view class="cpCount" v-if="item.type != '4'">￥<text>{{item.sub_price}}</text></view>
								<view class="condition" v-if="item.type != '4'">满{{item.min_price}}元可用</view>
								<view class="useBtn" @tap.stop='getCoupon(item.id)'>立即领取</view>
							</view>
						</view>
					</view> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner:['https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/cpBanner.png'],
				height:"",
				menu1:'-1',
				menu2:'1',
				haveList:[],
				noHaveList:[],
				countData:{},
			};
		},
		onLoad() {
			this.initBannerHeight();
			this.initHaveList();
			this.initNoHaveList();
			this.initHaveCount();
		},
		methods:{
			// 券数量
			initHaveCount(){
				this.tool.getData('/api/coupon/getMyCouponCount',{}).then(res=>{
					if(res){
						this.countData = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 已有优惠券列表
			initHaveList(){
				this.tool.getData('/api/coupon/getMyCoupon',{
					type:this.menu1,
					use_status:this.menu2
				}).then(res=>{
					// console.log(res);
					if(res){
						res.map((item,index)=>{
							item.flag = false;
						})
						this.haveList = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 未领取优惠券列表
			initNoHaveList(){
				this.tool.getData('/api/coupon/getCouponList',{}).then(res=>{
					// console.log(res);
					if(res){
						res.map((item,index)=>{
							item.haveGet = (((item.total_count - item.residue_count) / item.total_count) * 100).toFixed(2);
						})
						this.noHaveList = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 修改开关
			exchangeFlag(line){
				line.flag = !line.flag;
			},
			// 一级菜单
			changeFirstMenu(status){
				this.menu1 = status;
				this.initHaveList();
				this.initHaveCount();
			},
			// 切换二级菜单
			changeSecondMenu(status){
				this.menu2 = status;
				this.initHaveList();
				this.initHaveCount();
			},
			// 领取优惠券
			getCoupon(cpId){
				this.tool.getData('/api/coupon/getCoupon',{
					coupon_id:cpId
				}).then(res=>{
					console.log(res);
					if(res){
						uni.showToast({
							title:"成功领取",
							icon:"success"
						})
						this.initNoHaveList();
						this.menu1 = '-1';
						this.menu2 = '1';
						this.initHaveList();
					}
				})
			},
			initBannerHeight(){
				uni.getImageInfo({
					src:this.banner[0],
					success: (info) => {
						this.height = (uni.getSystemInfoSync().windowWidth * 0.936 / (info.width / info.height)) * 2;
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			},
			// 查看优惠券说明
			explain(){
				uni.navigateTo({
					url:'./cpDesc'
				})
			},
			// 返回首页
			goHome(){
				uni.switchTab({
					url:"/pages/seller"
				})
			}
		}
		
	}
</script>

<style lang="scss">
	page{
		background: #F4F4F4;
	}
	.cpList{
		width: 100%;
		overflow: hidden;
		.recommend{
			width: 100%;
			padding: 0 24rpx;
			margin-bottom: 24rpx;
			box-sizing: border-box;
			overflow: auto;
			.qlist{
				width: 100%;
				.qOne{
					width: 100%;
					background: white;
					border-radius: 20rpx;
					box-sizing: border-box;
					overflow: hidden;
					margin-bottom: 20rpx;
					.cpMain{
						width: 100%;
						position: relative;
						.cpBgImg{
							width: 100%;
							position: relative;
							.statusIcon{
								width: 130rpx;
								position: absolute;
								top: 0;
								right: 0;
							}
						}
						.cpContent{
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
							.contentLeft{
								width: 67%;
								height: 100%;
								padding:12rpx 24rpx;
								box-sizing: border-box;
								.content{
									width: 100%;
									.cpDetail{
										flex: 1;
										min-width: calc(100% - 70px);
										.toast{
											color: #666666;
											font-size: 12px;
											margin-bottom: 4rpx;
										}
										.cpName{
											margin-bottom: 4rpx;
											width: 100%;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
											font-size: 15px;
											font-weight: bold;
										}
										.time{
											color: #666666;
											font-size: 12px;
											margin-bottom: 12rpx;
										}
										.expbtn{
											color: #999999;
											font-size: 12px;
											width: 100%;
											.progress{
												width: 40%;
												height:12rpx;
												margin-right: 12rpx;
												background: #EDEDED;
												border-radius: 50px;
												.injoin{
													width: 10%;
													border-radius: 50px;
													height: 100%;
													background: #FC3C11;
												}
											}
										}
									}
									.shopImg{
										width: 128rpx;
										height: 128rpx;
										margin-right:12rpx;
										image{
											width: 100%;
											height: 100%;
											border-radius: 20rpx;
										}
									}
								}
								.tag{
									font-size: 10px;
									padding: 2px 18rpx;
									color: #FD5605;
									background: #FFF0E8;
									margin-bottom: 8rpx;
									width: max-content; 
									border-radius: 8px;
								}
							}
							.contentRight{
								width: 33%;
								height: 100%;
								padding: 24rpx;
								box-sizing: border-box;
								color: #FC3C11;
								.useBtn{
									width: max-content;
									padding: 10rpx 16rpx;
									border-radius: 50px;
									font-size: 12px;
									color: white;
									background: linear-gradient(270deg, #FC3C11 0%, #FD7005 100%);
								}
								.condition{
									font-size: 12px;
									margin-bottom: 10rpx;
								}
								.cpCount{
									font-size: 17px;
									font-weight: bolder;
									text{
										font-size: 20px;
									}
								}
							}
						}
					}
				}
			}
			.titles{
				width: 100%;
				font-size: 24rpx;
				margin-bottom: 35rpx;
				.tit1{
					margin-right: 20rpx;
					font-size: 18px;
					font-weight: bold;
					.titIcon{
						width: 40rpx;
						height: 40rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
		>.explain{
			width: 100%;
			margin: 50rpx 0 85rpx;
			color: #999999;
			font-size: 12px;
			.explainIcon{
				width: 24rpx;
				height: 24rpx;
				margin-left: 6rpx;
			}
		}
		.coupon{
			width: 100%;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			.cpOne{
				width: 100%;
				background: white;
				border-radius: 20rpx;
				box-sizing: border-box;
				overflow: hidden;
				margin-bottom: 20rpx;
				.cpMain{
					width: 100%;
					position: relative;
					.cpBgImg{
						width: 100%;
						position: relative;
						.statusIcon{
							width: 130rpx;
							position: absolute;
							top: 0;
							right: 0;
						}
					}
					.cpContent{
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						.contentLeft{
							width: 69%;
							height: 100%;
							padding:12rpx 24rpx;
							box-sizing: border-box;
							.content{
								width: 100%;
								.cpDetail{
									flex: 1;
									min-width: calc(100% - 70px);
									.toast{
										color: #666666;
										font-size: 12px;
										margin-bottom: 4rpx;
									}
									.cpName{
										margin-bottom: 4rpx;
										width: 100%;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										font-size: 15px;
										font-weight: bold;
									}
									.time{
										color: #666666;
										font-size: 12px;
										margin-bottom: 12rpx;
									}
									.expbtn{
										color: #999999;
										font-size: 12px;
										.exBtn{
											width: 24rpx;
											height: 24rpx;
											margin-left: 8rpx;
										}
									}
								}
								.shopImg{
									width: 128rpx;
									height: 128rpx;
									margin-right:12rpx;
									image{
										width: 100%;
										height: 100%;
										border-radius: 20rpx;
									}
								}
							}
							.tag{
								font-size: 10px;
								padding: 2px 18rpx;
								color: #FD5605;
								background: #FFF0E8;
								margin-bottom: 8rpx;
								width: max-content;
								border-radius: 8px;
							}
						}
						.contentRight{
							width: 31%;
							height: 100%;
							padding: 24rpx 18rpx;
							box-sizing: border-box;
							color: white;
							.useBtn{
								width: max-content;
								padding: 10rpx 16rpx;
								border-radius: 50px;
								background: white; 
								color: #FF5000;
								font-size: 12px;
							}
							.condition{
								font-size: 12px;
								margin-bottom: 10rpx;
							}
							.cpCount{
								font-size: 17px;
								font-weight: bolder;
								text{
									font-size: 20px;
								}
							}
						}
					}
				}
				.explain{
					width: 100%;
					padding: 24rpx;
					box-sizing: border-box;
					color: #999999;
					font-size: 12px;
					background: white;
					line-height: 38rpx;
				}
			}
			.status1{
				.cpMain{
					width: 100%;
					position: relative;
					.cpBgImg{
						width: 100%;
						position: relative;
						.statusIcon{
							width: 130rpx;
							position: absolute;
							top: 0;
							right: 0;
						}
					}
					.cpContent{
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						.contentLeft{
							width: 69%;
							height: 100%;
							padding:12rpx 24rpx;
							box-sizing: border-box;
							.content{
								width: 100%;
								.cpDetail{
									flex: 1;
									min-width: calc(100% - 70px);
									.toast{
										color: #666666;
										font-size: 12px;
										margin-bottom: 4rpx;
									}
									.cpName{
										color: #CFCFCF;
									}
									.time{
										color: #CFCFCF;
									}
								}
								.shopImg{
									width: 128rpx;
									height: 128rpx;
									margin-right:12rpx;
									image{
										width: 100%;
										height: 100%;
										border-radius: 20rpx;
									}
								}
							}
							.tag{
								background: #F2F2F2;
								color: #CFCFCF;
							}
						}
						.contentRight{
							color: #999999;
						}
					}
				}
			}
			.cpOne:last-child{
				margin:0;
			}
		}
		.kindBox{
			width: 100%;
			padding: 30rpx 24rpx 20rpx;
			box-sizing: border-box;
			background: white;
			.banner{
				width: 100%;
			}
			.secondMenu{
				width: 100%;
				.menuOne{
					width: max-content;
					background: #F2F2F2;
					border-radius: 50px;
					padding: 14rpx 38rpx;
					border: 1px solid #F2F2F2;
				}
				.active{
					background: rgba(255,240,232,0.39);
					border: 1px solid #FF5000;
					color: #FF5000;
				}
			}
			.menus{
				width: 100%;
				margin: 36rpx auto;
				overflow: hidden;
				overflow-x: auto;
				white-space: nowrap;
				.menuOne{
					display: inline-block;
					width: auto;
					margin-right: 50rpx;
					font-size: 15px;
				}
				.active{
					color: #FD5605;
				}
			}
		}
	}
</style>
